<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<c:if test="${sessionScope.loginMember == null }">
	<jsp:forward page="loginPage.sds"></jsp:forward>
</c:if>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>StepUp-Mission</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<style type="text/css">
#transview {
	display: block;
	background-image : url(./img/completed.jpg);
	background-repeat: no-repeat;
	background-position: center;
	opacity : .6;
	z-index : 2500;
}

#margin_top {
	margin-top : 30px;
}
</style>
</head>
<body>

	<div id="wrapper">

		<!-- 사이드바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span>
								<c:if test="${sessionScope.loginMember.mimage == null}">
									<img alt="image" class="img-circle"
									src="imgUpload/anonymous.jpg" width="160px"/>
								</c:if>
								<c:if test="${sessionScope.loginMember.mimage != null}">
									<img alt="image" class="img-circle"
									src="imgUpload/${sessionScope.loginMember.mimage}" width="160px"/>
								</c:if>
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">${sessionScope.loginMember.mname}</strong>
								</span> <span class="text-muted text-xs block">
									${sessionScope.loginMember.mposition}
								<b class="caret"></b>
								</span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="stepup_profile.sds">Profile</a></li>
								<li class="divider"></li>
								<li><a href="logout.sds">Logout</a></li>
							</ul>
						</div>
					</li>
					<!-- 메뉴 리스트 -->
					<li><a href="index.sds"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">Statistics</span></a></li>
					<li><a href="stepup_rank.sds"><i class="fa fa-flask"></i>
							<span class="nav-label">Ranking</span></a></li>
					<li><a href="stepup_badge.sds"><i class="fa fa-desktop"></i>
							<span class="nav-label">Badge</span></a></li>
					<li class="active"><a href="stepup_mission.sds"><i
							class="fa fa-envelope"></i> <span class="nav-label">Mission</span></a></li>
					<li><a href="stepup_temp.sds"><i class="fa fa-sitemap"></i>
							<span class="nav-label">Thermometer</span></a></li>
					<li><a href="stepup_donation.sds"><i class="fa fa-globe"></i>
							<span class="nav-label">Donation</span></a></li>
				</ul>
			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">

			<!-- 상단 메뉴 바 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>

					<!-- 상단 메뉴 - 검색, 로그아웃 포함 -->
					<ul class="nav navbar-top-links navbar-right">
						
						<!-- 상단: 로그인, 로그아웃 버튼 -->
						<c:if test="${sessionScope.loginMember != null}">
							<li><a href="stepup_profile.sds"><i class="fa fa-sign-out"></i>
								Profile
							</a></li>
							<li><a href="logout.sds"> <i class="fa fa-sign-out"></i>
								Logout
							</a></li>
						</c:if>
					</ul>
				</nav>
			</div>

			<!-- 메인 페이지 : 제목 -->
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-9">
					<h2>미션 모아보기</h2>
					<ol class="breadcrumb">
						<li>Home</li>
						<li>메뉴</li>
						<li class="active"><strong>미션</strong></li>
					</ol>
				</div>
				<div style="padding: 20px 30px 0px 0px">
					<img alt="image" class="img-responsive" src="img/logo.jpg"
					 style="Height: 80px; width: 80px;" align="right"  >
				</div>
			</div>


			<!-- 미션 모아보기 -->
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row"
					style="margin-right: auto; margin-left: auto; width: 800px;">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content ">
								<div class="carousel slide" id="carousel2">
									<ol class="carousel-indicators">
										<li data-slide-to="0" data-target="#carousel2" class="active"></li>
										<li data-slide-to="1" data-target="#carousel2"></li>
										<li data-slide-to="2" data-target="#carousel2" class=""></li>
									</ol>
									<div class="carousel-inner">
										<div class="item active">
											<img alt="image" class="img-responsive" src="img/carr1.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
											</div>
										</div>
										<div class="item ">
											<img alt="image" class="img-responsive" src="img/carr2.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
											</div>
										</div>
										<div class="item">
											<img alt="image" class="img-responsive" src="img/carr3.jpg"
												style="Height: 300px; width: 1000px">
											<div class="carousel-caption">
											</div>
										</div>
									</div>
									<a data-slide="prev" href="#carousel2"
										class="left carousel-control"> <span class="icon-prev"></span>
									</a> <a data-slide="next" href="#carousel2"
										class="right carousel-control"> <span class="icon-next"></span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
				<!-- 미션 내용 시작 -->
				<div class="row" id="missioncont">
				
				<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image">
				</div>
			</div>
			<div class="footer">
				<div align="right">
						StepUp System. Copyright <strong> &copy; SHINHAN DATA SYSTEM.</strong> All Right Reserved. 2015.
					</div>
			</div>

		</div>
	</div>

	<!-- Modal -->
	<div id="modalmission">
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Peity -->
	<script src="js/plugins/peity/jquery.peity.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>

	<!-- iCheck -->
	<script src="js/plugins/iCheck/icheck.min.js"></script>

	<!-- Peity d data  -->
	<script src="js/demo/peity-demo.js"></script>

	<script>
         $(document).ready(function(){
        	 $.ajax({
             	url : "stepup_mission_list.sds",
             	type : "post",
             	async : false,
             	dataType : "json",
             	success : function(data) {
             		var i;
             		$.each(data.missionlist, function(index, item){
             			i=index+1;
             			if(item.progress != 100){
             				$("#missioncont").append(
                 					"<div class='col-lg-6'>"+
            						"<div class='ibox float-e-margins'>"+
            							"<div class='ibox-title'>"+
            								"<h5>"+"Misson No."+i+"</h5>"+
            							 	"<div class='ibox-tools'>"+
            									item.mskind+" 미션"+
            								"</div>"+
             							"</div>"+
            							"<div class='ibox-content'>"+
            								"<a href='#myModal"+i+"' data-toggle='modal'>"+
            									"<div class='col-sm-4'>"+
            										"<div class='text-center'>"+
           											"<img alt='image' class='fancybox m-t-xs img-responsive'src='img/badge"+i+".jpg'>"+
            											"<div class='m-t-xs font-bold'>"+"</div>"+
            										"</div>"+
            									"</div>"+
            									"<div class='col-sm-8'>"+
            										"<h3>"+
            											"<strong>"+item.msname+"</strong>"+
            										"</h3>"+
            										"<p>"+
            											"<i class='fa fa-map-marker'>"+"</i>"+" Mission"+
            										"</p>"+
            										"<address>"+
            											item.msdetail+"</br>"+
            									"</div>"+
            									"<div class='row' style='margin-top: 15px'>"+
            										"<div class='col-lg-12'>"+
            											"<dl class='dl-horizontal'>"+
            												"<dt>"+"Completed:"+"</dt>"+
            												"<dd>"+
            													"<div class='progress progress-striped active m-b-sm'>"+
            														"<div style='width:"+ item.progress+"%"+";' class='progress-bar'>"+"</div>"+
            													"</div>"+
            													"<small>"+"Project completed in" +"<strong>"+item.progress+"%"+"</strong>"+". Remaining close the project, sign a contract and invoice."+
            													"</small>"+
            												"</dd>"+
            											"</dl>"+
            										"</div>"+
            									"</div>"+
            								"</a>"+
            							"</div>"+
            						"</div>"+
            					"</div>"
                 			);
             			} else {
             				$("#missioncont").append(
                 					"<div class='col-lg-6'>"+
            						"<div class='ibox float-e-margins'>"+
            							"<div class='ibox-title'>"+
            								"<h5>"+"Misson No."+i+"</h5>"+
            								"<div class='ibox-tools'>"+
        									item.mskind+" 미션"+
        									"</div>"+
            							"</div>"+
            							"<div class='ibox-content' id='transview'>"+
            								"<a href='#myModal"+i+"' data-toggle='modal'>"+
            									"<div class='col-sm-4'>"+
            										"<div class='text-center'>"+
            											"<img alt='image' class='fancybox m-t-xs img-responsive' src='img/badge"+i+".jpg'>"+
            											"<div class='m-t-xs font-bold'>"+"</div>"+
            										"</div>"+
            									"</div>"+
            									"<div class='col-sm-8'>"+
            										"<h3>"+
            											"<strong>"+item.msname+"</strong>"+
            										"</h3>"+
            										"<p>"+
            											"<i class='fa fa-map-marker'>"+"</i>"+" Mission "+
            										"</p>"+
            										"<address>"+
            											item.msdetail+"</br>"+
            									"</div>"+
            									"<div class='row' style='margin-top: 15px'>"+
        										"<div class='col-lg-12'>"+
            											"<dl class='dl-horizontal'>"+
            												"<dt>"+"Completed:"+"</dt>"+
            												"<dd>"+
            													"<div class='m-b-sm' id='margin_top'>"+
            														"<div style='width:"+ item.progress+"%"+";' class='progress-bar'>"+"</div>"+
            													"</div>"+
            													"<small>"+"Project completed in" +"<strong>"+item.progress+"%"+"</strong>"+". Remaining close the project, sign a contract and invoice."+
            													"</small>"+
            												"</dd>"+
            											"</dl>"+
           											"</div>"+
         											"</div>"+
            								"</a>"+
            							"</div>"+
            						"</div>"+
            					"</div>"
                 			);
             			}
             			
             			$("#modalmission").append(
             					"<div class='modal inmodal' id='myModal"+i+"' tabindex='-1' role='dialog' aria-hidden='true'>"+
	             					"<div class='modal-backdrop in'>"+"</div>"+
             						"<div class='modal-dialog' id='modalmission'>"+
		               					"<div class='modal-content animated flipInY' >"+
		                 					"<div class='modal-header'>"+
		                						"<button type='button' class='close' data-dismiss='modal'>"+
		    	            						"<span aria-hidden='true'>"+"&times;"+"</span>"+"<span class='sr-only'>"+"Close"+"</span>"+
		    	            					"</button>"+
		    	            					"<h4 class='modal-title'>"+item.msname+"</h4>"+
		    	            				"</div>"+
		    	            				"<div class='modal-body'>"+
		    	            					"<p>"+
		    	            						"<strong>"+"</strong>"+item.msdetail+"</p>"+
		    	            				"</div>"+
		    	            				"<div class='modal-footer'>"+
		    	            					"<button type='button' class='btn btn-white' data-dismiss='modal'>"+"Close"+"</button>"+
		    	            					/* "<button type='button' class='btn btn-primary'>"+"Save changes"+"</button>"+ */
		    	            				"</div>"+
		                				"</div>"+
    	            				"</div>"+
                 				"</div>"
                 			);
             		});
             	},
             	error : function(){
             		alert("실패: " + data.status);
             	}
             });
        });
    </script>
</body>
</html>
